<template>
	<view class="kind">
		<navigator v-if="category.length>0" class="block chuangyi" :url="`./kindList/kindList?id=${category[0].id}`">
			<image class="img" :src="category[0].icon" mode="scaleToFill"></image>
			<view class="ctitle">{{category[0].name}}</view>
			<view class="etitle">{{category[0].etitle}}</view>
		</navigator>

		<navigator v-if="category.length>0" class="block shipin" :url="`./kindList/kindList?id=${category[1].id}`">
			<image class="img" :src="category[1].icon" mode="scaleToFill"></image>
			<view class="ctitle">{{category[1].name}}</view>
			<view class="etitle">{{category[1].etitle}}</view>
		</navigator>
		<view class="f-d">
			<navigator v-if="category.length>0" class="block fengge" :url="`./kindList/kindList?id=${category[2].id}`">
				<image class="img" :src="category[2].icon" mode="scaleToFill"></image>
				<view class="ctitle">{{category[2].name}}</view>
				<view class="etitle">{{category[2].etitle}}</view>
			</navigator>
			<navigator v-if="category.length>0" class="block dengju" :url="`./kindList/kindList?id=${category[3].id}`">
				<image class="img" :src="category[3].icon" mode="scaleToFill"></image>
				<view class="ctitle">{{category[3].name}}</view>
				<view class="etitle">{{category[3].etitle}}</view>
			</navigator>
		</view>
	</view>

</template>

<script>
	import {
		findCategory
	} from '../../api/kind/kindList/index.js'
	export default {
		data() {
			return {
				category: []
			};
		},
		onLoad() {
			var _this = this
			findCategory('1308336521604599809').then(res => {
				console.log(res)
				_this.category = res.data.category.children
			})
		}
	}
</script>

<style lang="scss" scoped>
	.f-d {
		width: 670rpx;
		display: flex;
		margin: 0 auto;
		margin-bottom: 48rpx;
		justify-content: space-between;

		.fengge,
		.dengju {
			width: 312rpx;
			height: 442rpx;
			background: #FAFAFA;
			box-shadow: 0 12px 20px 0 rgba(83, 66, 49, 0.03);
			border-radius: 20px;
			border-radius: 20px;
		}
	}

	.block {
		position: relative;

		.img {
			position: absolute;
			right: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.ctitle {
			position: absolute;
			left: 52rpx;
			top: 148rpx;
			font-size: 48rpx;
			color: #3E3E3E;
		}

		.etitle {
			position: absolute;
			left: 52rpx;
			top: 220rpx;
			color: #7F7F7F;
			font-size: 30rpx;
		}

		&.chuangyi,
		&.shipin {
			width: 670rpx;
			height: 302rpx;
			background: #D5D5D5;
			box-shadow: 0 12px 20px 0 rgba(83, 66, 49, 0.05);
			border-radius: 20px;
			margin: 28px auto;

			.img {
				width: 60%;
			}

		}

		&.shipin {
			background-color: #fff;
		}
	}
</style>
